<template>
	<div class="row-me">
		<div ref="editor" :style="{'width':width}"></div>
		<el-button type="primary" @click="clickImg" class="width100 height40 margin-left20">上传图片</el-button>
		<imgLibrary ref="imgLibrary" @handleImgOk="handleImgOk"></imgLibrary>
	</div>
</template>
<script>
	import WangEditor from "@/utils/formula-menu-conf.js";
	import imgLibrary from "@/components/imgLibrary"
	import Vue from 'vue'
	export default {
		name: "WangEditor",
		components: {
			imgLibrary
		},
		data() {
			return {
				editorE: "" //编辑器的对象
			}
		},
		//接收v-model的值
		props: {
			value: String,
			height: {
				type: Number,
				default: 500
			},
			width: {
				type: String,
				default: '60vw'
			}
		},
		model: {
			prop: 'value',
			event: 'change'
		},
		mounted() {
			//初始化编辑框
			this.init();
			this.editorE.txt.html(this.value)
		},
		watch: {
			value(val) { //普通的watch监听
				if (val !== this.editorE.txt.html()) {
					this.editorE.txt.html(val)
				}
			}
		},
		methods: {
			//点击图片库
			clickImg() {
				this.$refs.imgLibrary.show()
			},
			handleImgOk(data) {
				this.editorE.txt.html(this.editorE.txt.html() + `<img src=${data}>`)
			},
			init() {
				const _this = this;
				/*实例化*/
				_this.editorE = new WangEditor(_this.$refs.editor);
				// 配置 server 接口地址
				_this.editorE.config.uploadImgServer = _this.$host + '/file/upload?token=' + localStorage
					.getItem('token')
				//设置富文本的高度
				_this.editorE.config.height = _this.height
				//默认限制图片大小是 5M
				_this.editorE.config.uploadImgMaxSize = 8 * 1024 * 1024 // 8M
				//自定义上传的参数
				_this.editorE.config.uploadFileName = 'file'
				//设置请求参数
				_this.editorE.config.uploadImgParams = {
					suffixPath: '@nowm' //后缀水印
				}
				//timeout 即上传接口等待的最大时间，默认是 10 秒钟，可以自己修改
				_this.editorE.config.uploadImgTimeout = 10 * 1000
				_this.editorE.config.uploadImgHooks = {
					// 上传图片之前
					before: function(xhr) {
						console.log(xhr)
						/* // 可阻止图片上传 return { prevent: true, msg: '需要提示给用户的错误信息' }*/
					},
					// 图片上传并返回了结果，图片插入已成功
					success: function(xhr) {
						//console.log('success', xhr)
					},
					// 图片上传并返回了结果，但图片插入时出错了
					fail: function(xhr, editor, resData) {
						console.log('fail', resData)
					},
					// 上传图片出错，一般为 http 请求的错误
					error: function(xhr, editor, resData) {
						console.log('error', xhr, resData)
					},
					// 上传图片超时
					timeout: function(xhr) {
						console.log('timeout')
					},
					// 图片上传并返回了结果，想要自己把图片插入到编辑器中
					// 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
					customInsert: function(insertImgFn, result) {
						// result 即服务端返回的接口
						console.log('customInsert', result)
						// insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
						insertImgFn(result.data)
					}
				}
				/*创建编辑器*/
				_this.editorE.create();
				// 监控变化，同步更新到文本 向上传递更新
				_this.editorE.config.onchange = function(html) {
					//console.log(html);
					_this.$emit("change", html);
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	/deep/ .w-e-toolbar {
		z-index: 10 !important;
	}

	/deep/ .w-e-text-container {
		z-index: 9 !important;
	}
</style>